<template>
  <view class="withdrawal">
    <view class="withdrawal-bottom">
      <text>选择提现账号</text>
      <view
        class="withdrawal-Way"
        v-for="item in withdrawal"
        :key="item.id"
        @click="choose(item.id)"
      >
        <view class="">
          <view class="" v-if="item.cate == 10">{{ item.bank }}</view>
          <view class="" v-else-if="item.cate == 20">支付宝</view>
          <view class="" v-else>微信</view>
          <view class="withdrawal-text"
            >账号：{{ item.name }}
            <text v-if="item.cate == 10" style="color: #999; font-weight: 500"
              >({{ item.account }})</text
            ></view
          >
          <view
            class="withdrawal-text"
            style="display: flex; align-items: center; margin-top: 10rpx"
            >默认：
            <switch
              name="isDefault"
              disabled
              @click="setdefaults(item.id)"
              :checked="item.isDefault"
              style="transform: scale(0.6)"
            />
          </view>
        </view>
        <img src="@/static/images/edit.png" alt="" @click="goedit(item.id)" style="height: 40rpx" />
      </view>
    </view>
    <button class="button" @tap="addacount">添加账号</button>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { getwithdrawal, setdefault } from '@/services/home'
import { ref } from 'vue'

const form = ref({
  balance: '',
})
const goedit = (id: any) => {
  event.stopPropagation()
  uni.navigateTo({
    url: '/pagesMember/addwithdrawal/withdrawal?id=' + id,
  })
}
const setdefaults = async (id: any) => {
  event.stopPropagation()
  uni.showModal({
    title: '提示',
    content: '确定要设置为默认账号？',
    success: async function (result) {
      if (result.confirm) {
        const res = await setdefault({ id: id })
        if (res.success) {
          uni.showToast({
            title: '设置成功',
            icon: 'none',
          })
          getuserwithdrawal()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      }
    },
  })
}
const choose = (id: any) => {
  uni.redirectTo({
    url: '/pagesMember/withdrawal/withdrawal?id=' + id,
  })
}
const addacount = () => {
  uni.navigateTo({
    url: '/pagesMember/addwithdrawal/withdrawal',
  })
}
const withdrawal = ref([])

const getuserwithdrawal = async () => {
  const res = await getwithdrawal()
  if (res.success) {
    withdrawal.value = res.data
  }
}
onShow(async () => {
  await getuserwithdrawal()
})
</script>

<style lang="scss">
.withdrawal {
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;

  .withdrawal-top {
    padding: 0 40rpx;
    background-color: #fff;
    font-size: 24rpx;
    color: #999999;
  }

  .withdrawal-bottom {
    font-size: 24rpx;
    color: #999999;

    .withdrawal-Way {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 20rpx;
      background-color: #fff;
      margin-top: 20rpx;
      color: #000;
      font-size: 26rpx;
    }
    .withdrawal-text {
      margin-top: 20rpx;
      font-size: 22rpx;
      color: #999;
    }
    text {
      display: inline-block;
      padding: 20rpx;
      padding-bottom: 0;
      color: #343a40;
      font-weight: 700;
    }
  }
}

.button {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80rpx;
  font-size: 28rpx;
  border-radius: 72rpx;
  color: #fff;
  background-color: #1e9fff;
  margin-top: 40rpx;
}
</style>
